<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item1,index1) of pages" :key="index1">
        <div class="icon" v-for="item of item1" :key="item.id">
          <div class="icon-img">
            <img :src="item.imgUrl" alt />
          </div>
          <p>{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "HomeIcons",
  props: {
    iconList:Array
  },
  data (){
    return{
      swiperOption:{
        pagination: '.pagination',
      },
    }
  },
  computed:{
    pages(){
      const pages=[]
      this.iconList.forEach((item,index)=>{
        const page=Math.floor(index/8)
        // 最开始pages没有page属性，设置pages[page]为空数组，后面才能往里面加东西
        // 把第一项加到第一页之后，pages[page]就不是空数组了
        // 所以加判断，只让pages[page]初始为一个空数组
        if(!pages[page]){
          pages[page]=[]
        }
        pages[page].push(item)
      })
      return pages
    }
  }
};
</script>
<style scoped lang="stylus">
@import '~styles/varibles.styl';
.swiper-container {
  position relative
  height 0
  // 宽高比约等于2：1
  padding-bottom 55%
}  
.pagination{
  position absolute
  text-align center
  bottom 0
  }
.icons {
  // overflow: hidden;
  height: 0;
  padding-bottom: 50%;
  margin: .2rem 0 .5rem 0
  .icon {
    position: relative;
    float: left;
    width: 25%;
    height: 0;
    padding-bottom: 25%;

    .icon-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0.44rem; // 包图片的div一个绝对定位，并给bottom，使得图片可以留出下边的区域给文字

      img {
        display: block;
        margin: 0 auto;
        height: 100%;
        box-sizing: border-box; // 缩小图片，可以给图片border-box，并且给它padding，图片就会从四周向中心缩小
        padding: 0.1rem;
      }
    }

    p {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 0.44rem;
      color: $darkTextColor;
      text-align: center;
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      ellipsis()
    }
  }
}
</style>
